feat(web): customize diff colors and markers by SunkenInTime · Pull Request #7347 · pingdotgg/t3code

SunkenInTime · 2026-08-17T22:58:38Z

<!--
Thank you for contributing to T3 Code! Please note that only maintainers have merge access. Your PR will be reviewed by the team.

Important: We generally do not accept PRs that add new features, new providers, or introduce significant architectural changes without prior discussion.
For those ideas, please open an issue or proposal first so we can align on scope and approach.
-->

What Changed

Added Typography settings for red/green or orange/blue diff colors and bar or classic +/- line indicators.
Applied the selected appearance to the main diff panel, pull request review diffs, and inline review comment diffs.
Persisted both choices in unified settings with backward-compatible defaults, reset behavior, settings search, and concise user documentation.

Why

Diff colors and line indicators were fixed in the renderer, so users could not choose a more distinguishable palette or familiar patch markers. These settings keep the existing red/green bars as the default while offering accessible orange/blue colors and classic markers everywhere web/desktop diffs render.

UI Changes

Before

After

Checklist

This PR is small and focused
I explained what changed and why
I included before/after screenshots for any UI changes
I included a video for animation/interaction changes (not applicable; no motion or timing changes)

Verification:

vp run --filter @t3tools/web typecheck
git diff --check
Live web pass for both selectors and the shared diff preview

Generated with GPT-5.6-sol in the Codex harness.

Note

Add user-configurable diff colors and marker styles to settings

Adds diffColorScheme (red-green | orange-blue) and diffIndicatorStyle (bars | classic) to ClientSettingsSchema with decoding defaults in settings.ts
Introduces DiffAppearanceRows in the Appearance settings panel with a live DiffPreview that reflects both selections, plus searchable entries in settingsSearch.ts
Routes all diff surfaces through CSS variables (--t3-diff-addition-color, --t3-diff-deletion-color) via getDiffColorSchemeClassName in diffRendering.ts, and applies the scheme globally via DiffAppearanceSync in __root.tsx
Wraps file diffs in a new StyledFileDiff and updates StyledDiffCodeView to pass diffIndicators from settings so review comments and code views use shared appearance
Risk: DIFF_SURFACE_THEME_UNSAFE_CSS in diffRendering.ts rewires addition/deletion base colors to CSS variables with fallbacks; any out-of-tree diff surface not using getDiffColorSchemeClassName or StyledFileDiff will keep fixed red/green colors until updated

^{Macroscope summarized 60a1e37.}

Note

Low Risk
UI and appearance preferences with backward-compatible defaults; no auth, data, or security-sensitive paths.

Overview
Adds user-configurable diff appearance via two persisted client settings: diff colors (red/green vs orange/blue) and diff markers (bars vs classic +/−).

Settings & contracts: New diffColorScheme and diffIndicatorStyle on ClientSettings with defaults red-green and bars. Appearance settings gain Diff colors and Diff markers rows with live DiffPreview, reset/search integration, and user docs.

Rendering: --t3-diff-addition-color / --t3-diff-deletion-color drive diff surfaces globally (DiffAppearanceSync on document.documentElement), Pierre CSS overrides, and stat labels (DiffStatLabel, PR diff stats). StyledDiffCodeView and new StyledFileDiff read settings and pass diffIndicators into Pierre; timeline review-comment diffs use StyledFileDiff instead of raw FileDiff.

^{Reviewed by Cursor Bugbot for commit 60a1e37. Bugbot is set up for automated code reviews on this repo. Configure here.}

coderabbitai · 2026-08-17T22:58:49Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b3c30d55-f5a6-40dd-b8b9-1db514a7fa2e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

macroscopeapp

Two consistency findings on the new diff appearance settings. Everything else (palette class plumbing, StyledFileDiff extraction, settings routing/search wiring) looks consistent with the existing patterns.

^{Posted via Macroscope — UI Consistency}

macroscopeapp

Two consistency findings in the new Appearance diff settings UI (apps/web/src/components/settings/SettingsPanels.tsx). Everything on the diff-rendering side (StyledDiffCodeView.tsx, diffRendering.ts) reads consistently: the palette is routed through --t3-diff-* with --success/--destructive fallbacks, so FilePreviewPanel's reuse of DIFF_SURFACE_THEME_UNSAFE_CSS is unaffected, and diffIndicators: "bars" keeps the existing [data-indicators="bars"] selected-line rules matching.

^{Posted via Macroscope — UI Consistency}

macroscopeapp

Reviewed the diff-appearance settings UI and the shared diff surface wrapper. The palette plumbing (getDiffColorSchemeClassName → --t3-diff-* → --diffs-*-base/tint overrides) is now owned in one place and StyledFileDiff reuses it, which resolves the earlier duplication and base-color concerns. Two findings remain on the new Appearance tiles' Toggle class string.

^{Posted via Macroscope — UI Consistency}

macroscopeapp · 2026-08-18T02:24:21Z

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces a new user-facing feature with new settings types, new UI components, and dynamic styling logic. While the changes are cosmetic and well-scoped, new features introducing user-facing behavior warrant human review.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate af66c02

macroscopeapp

Two new Appearance selects and the standalone diff preview don't follow the settings row conventions in this file. Details inline.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate 13f3b9f

macroscopeapp

UI consistency review of the diff appearance settings. Three findings: a preview that no longer sits with the setting it demonstrates, diff-panel chrome that stays red/green when the orange/blue palette is selected, and the new StyledFileDiff wrapper landing without a focused test for its forwarding contract. The Select controls now match the shared settings-row pattern (w-full sm:w-40, SettingsRow children slot), so earlier findings on those look resolved.

^{Posted via Macroscope — UI Consistency}

macroscopeapp

One finding: the new diff palette stops at the diff surface, so the app-side +/- counts rendered directly above it keep the red/green colors. Details inline.

^{Posted via Macroscope — UI Consistency}

macroscopeapp

One consistency gap in the new diff-palette contract, plus a small dead prop. Details inline.

^{Posted via Macroscope — UI Consistency}

cursor

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 0c1e164. Configure here.}

SunkenInTime · 2026-08-18T19:08:39Z

@macroscope-app review

macroscopeapp · 2026-08-18T19:08:46Z

Sorry, I'm unable to act on this request because you do not have permissions within this repository.

…earance-settings # Conflicts: # apps/web/src/components/settings/SettingsFontPreviews.tsx

macroscopeapp

Two consistency findings on the diff appearance work. The global DiffAppearanceSync token now makes the palette reachable app-wide, but two hand-rolled diff stats still hardcode red/green, and the settings-search catalog order no longer matches where the new rows render.

^{Posted via Macroscope — UI Consistency}

macroscopeapp · 2026-08-20T02:02:03Z

    to: "/settings/appearance",
  },
+  {
+    id: "diff-colors",


searchSettings filters this array in place, and the catalog is documented as being "in result order" — the Appearance entries otherwise mirror the page exactly (scheme, themes, glass, environment identification, then the Typography rows). These two rows render inside Typography right after the Code font row, so listing them here puts them ahead of environment-identification and every font entry in search results.

Suggest moving both entries to sit between code-font and terminal-font so result order keeps matching page order.

^{Posted via Macroscope — UI Consistency}

macroscopeapp · 2026-08-20T02:02:03Z

-        <span aria-hidden="true" className="font-mono text-success">
+        <span
+          aria-hidden="true"
+          className="font-mono text-[var(--t3-diff-addition-color,var(--success))]"


Now that DiffAppearanceSync puts --t3-diff-* on <html>, this label and PullRequestDiffStat follow the setting — but the two hand-rolled +N / −M stats do not: Sidebar.tsx:1543-1544 (text-emerald-600 dark:text-emerald-400 / text-red-600 dark:text-red-400) and GitActionsControl.tsx:1939-1941 plus the totals at 1952-1957 (text-success / text-destructive). Before this PR every diff stat was consistently red/green; with Orange and blue selected the sidebar thread rows and the commit sheet stay green/red beside blue/orange stats everywhere else.

Smallest fix: swap those four class strings for text-[var(--t3-diff-addition-color,var(--success))] / text-[var(--t3-diff-deletion-color,var(--destructive))], or render DiffStatLabel at those call sites so the palette has one owner.

^{Posted via Macroscope — UI Consistency}

feat(web): customize diff colors and markers

57dedf1

github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:L 100-499 changed lines (additions + deletions). labels Aug 17, 2026

test(desktop): cover diff appearance settings

dc4a888

macroscopeapp Bot reviewed Aug 17, 2026

View reviewed changes

Comment thread apps/web/src/lib/diffRendering.ts

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

macroscopeapp Bot reviewed Aug 17, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

SunkenInTime added 3 commits August 17, 2026 16:08

fix(web): apply diff palette across diff chrome

053c326

fix(web): keep diff palette mapping in sync

5a4b464

refactor(web): trim diff appearance settings

05096bd

macroscopeapp Bot reviewed Aug 18, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

fix(web): preserve diff toggle interaction

413b495

SunkenInTime marked this pull request as ready for review August 18, 2026 02:19

macroscopeapp Bot previously approved these changes Aug 18, 2026

View reviewed changes

refactor(web): reuse diff preview in appearance settings

af66c02

macroscopeapp Bot reviewed Aug 18, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

fix(web): align diff appearance controls

ecd0ba5

macroscopeapp Bot previously approved these changes Aug 18, 2026

View reviewed changes

fix(web): move diff settings into typography

13f3b9f

cursor Bot reviewed Aug 18, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

fix(web): keep terminal preview with monospace setting

53d6903

macroscopeapp Bot reviewed Aug 18, 2026

View reviewed changes

Comment thread apps/web/src/components/diffs/StyledDiffCodeView.test.tsx Outdated

Comment thread apps/web/src/lib/diffRendering.ts

Comment thread apps/web/src/components/settings/SettingsPanels.tsx

macroscopeapp Bot reviewed Aug 18, 2026

View reviewed changes

Comment thread apps/web/src/lib/diffRendering.ts

SunkenInTime added 2 commits August 18, 2026 11:29

fix(web): apply diff palette to change counts

bc594cc

fix(web): color pull request diff totals

0c1e164

macroscopeapp Bot reviewed Aug 18, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

Comment thread apps/web/src/components/pullRequest/pullRequestPresentation.tsx

cursor Bot reviewed Aug 18, 2026

View reviewed changes

Comment thread apps/web/src/components/pullRequest/pullRequestPresentation.tsx

fix(web): apply diff palette globally

b0c6753

Merge remote-tracking branch 'upstream/main' into t3code/add-diff-app…

60a1e37

…earance-settings # Conflicts: # apps/web/src/components/settings/SettingsFontPreviews.tsx

macroscopeapp Bot reviewed Aug 20, 2026

View reviewed changes

Uh oh!

Conversation

SunkenInTime commented Aug 17, 2026 • edited by macroscopeapp Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What Changed

Why

UI Changes

Checklist

Add user-configurable diff colors and marker styles to settings

Uh oh!

coderabbitai Bot commented Aug 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

macroscopeapp Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

macroscopeapp Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

macroscopeapp Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

macroscopeapp Bot commented Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Approvability

Uh oh!

macroscopeapp Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

macroscopeapp Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

macroscopeapp Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

macroscopeapp Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

SunkenInTime commented Aug 18, 2026

Uh oh!

macroscopeapp Bot commented Aug 18, 2026

Uh oh!

macroscopeapp Bot left a comment

Choose a reason for hiding this comment

Uh oh!

macroscopeapp Bot Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

macroscopeapp Bot Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

SunkenInTime commented Aug 17, 2026 •

edited by macroscopeapp Bot

Loading

coderabbitai Bot commented Aug 17, 2026 •

edited

Loading

macroscopeapp Bot commented Aug 18, 2026 •

edited

Loading